<template>
	<view  @click="go">
		<view class="a-list-item">
			<view class="a-title">
				<slot name="herder">
					{{title}}
				</slot>
			</view>
			<tui-icon name="arrowright" :size="32" color="#999"></tui-icon>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props:["title","to"],
		data() {
			return {
				
			}
		},
		methods: {
			go(){
				this.to && uni.navigateTo({
					url:this.to
				})
			}
		}
	}
</script>

<style lang="scss">
.a-list-item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	background-color: #fff;
	line-height: 1.6em;
	.a-title{
		display: flex;
		align-items: center;
		font-size: 18px;
		line-height: 1em;
		&::before{
			content: "";
			height: 1.2em;
			border-left: 4px solid #007AFF;
			margin: 0 .4em;
		}
	}
	&::before{
		content: "";
		position: absolute;
		border-bottom: 1px solid #d5d5d5;
		left: 0;
		right: 0;
		bottom: 0;
		transform: scaleY(.3);
	}
}
</style>
